import React from 'react'
import { Route, Switch, Redirect, withRouter } from 'react-router-dom'
import { compose } from 'redux'
import Loadable from './utils/loadable'
import Loading from './components/loading'
import EatRandom from './pages/eatRandom'

// md编辑器
const UseComponents = Loadable({
	loader: () => import('./pages/useComponents'),
	loading: () => <Loading />,
})

// md编辑器
const MdEdit = Loadable({
	loader: () => import('./pages/mdEdit'),
	loading: () => <Loading />,
})

// 面试题
const Interview = Loadable({
	loader: () => import('./pages/interview'),
	loading: () => <Loading />,
})

// 头像截取
const Screenshot = Loadable({
	loader: () => import('./pages/screenshot/screenshot'),
	loading: () => null,
})

// G2图像
const Charts = Loadable({
	loader: () => import('./pages/charts'),
	loading: () => null,
})

// 问卷
const Questionnaire = Loadable({
	loader: () => import('./pages/questionnaire'),
	loading: () => null,
})

// demo
const Demo = Loadable({
	loader: () => import('./pages/demo'),
	loading: () => null,
})

// 页签切换
const TabShowDemo = Loadable({
	loader: () => import('./pages/tabPanes/tabShowDemo'),
	loading: () => null,
})

// G6
const G6 = Loadable({
	loader: () => import('./pages/g6'),
	loading: () => null,
})

// G6 2
const Chart = Loadable({
	loader: () => import('./pages/g6/chart'),
	loading: () => null,
})

// G6Editor
const G6Editor = Loadable({
	loader: () => import('./pages/g6/editor/index'),
	loading: () => null,
})

// G6 test
const ChartTest = Loadable({
	loader: () => import('./pages/g6/editor/indexTest'),
	loading: () => null,
})

// G6Play
const G6Play = Loadable({
	loader: () => import('./pages/g6/play'),
	loading: () => null,
})

// Home
const Home = Loadable({
	loader: () => import('./pages/home'),
	loading: () => null,
})

// 我
const Me = Loadable({
	loader: () => import('./pages/me'),
	loading: () => null,
})

// Form
const FormTest = Loadable({
	loader: () => import('./pages/form'),
	loading: () => null,
})

// Carousel
const Carousel = Loadable({
	loader: () => import('./pages/carousel'),
	loading: () => null,
})

// Progress
const Progress = Loadable({
	loader: () => import('./pages/progress'),
	loading: () => null,
})

// Memo
const Memo = Loadable({
	loader: () => import('./pages/memo'),
	loading: () => null,
})

// Keep
const Keep = Loadable({
	loader: () => import('./pages/keepAlive'),
	loading: () => null,
})

// TableChart
const TableChart = Loadable({
	loader: () => import('./pages/tableChart'),
	loading: () => null,
})

// Excel
const Excel = Loadable({
	loader: () => import('./pages/excel'),
	loading: () => null,
})

// l7
const L7 = Loadable({
	loader: () => import('./pages/L7'),
	loading: () => null,
})

// virtualList
const VirtualList = Loadable({
	loader: () => import('./pages/virtualList'),
	loading: () => null,
})

// Hooks
const Hooks = Loadable({
	loader: () => import('./pages/hooks'),
	loading: () => null,
})

// RequestAnimationFrame
const RequestAnimationFrame = Loadable({
	loader: () => import('./pages/requestAnimationFrame'),
	loading: () => null,
})

// RequestIdleCallback
const RequestIdleCallback = Loadable({
	loader: () => import('./pages/requestIdleCallback'),
	loading: () => null,
})

// useContext
const UseContext = Loadable({
	loader: () => import('./pages/useContext'),
	loading: () => null,
})

// suspense
const SuspenseTest = Loadable({
	loader: () => import('./pages/suspense'),
	loading: () => null,
})

// DragPlay
const DragPlay = Loadable({
	loader: () => import('./pages/drag'),
	loading: () => null,
})

// Routes
const Routes = Loadable({
	loader: () => import('./pages/routes'),
	loading: () => null,
})

// useImperativeHandle
const UseImperativeHandle = Loadable({
	loader: () => import('./pages/useImperativeHandle'),
	loading: () => null,
})

const RouteList = (props) => {
	return (
		<Switch>
			<Route path="/mdEdit" component={MdEdit} />
			<Route path="/screenshot" component={Screenshot} />
			<Route path="/charts" component={Charts} />
			<Route path="/questionnaire" component={Questionnaire} />
			<Route path="/demo" component={Demo} />
			<Route path="/tabShowDemo" component={TabShowDemo} />
			<Route path="/g6" component={G6} />
			<Route path="/home" component={Home} />
			<Route path="/me" component={Me} />
			<Route path="/form" component={FormTest} />
			<Route path="/g6-chart" component={Chart} />
			<Route path="/g6-test" component={ChartTest} />
			<Route path="/g6-editor" component={G6Editor} />
			<Route path="/g6-play" component={G6Play} />
			<Route path="/interview" component={Interview} />
			<Route path="/carousel" component={Carousel} />
			<Route path="/progress" component={Progress} />
			<Route path="/memo" component={Memo} />
			<Route path="/keep" component={Keep} />
			<Route path="/tableChart" component={TableChart} />
			<Route path="/excel" component={Excel} />
			<Route path="/eatRandom" component={EatRandom} />
			<Route path="/map" component={L7} />
			<Route path="/virtualList" component={VirtualList} />
			<Route path="/hooks" component={Hooks} />
			<Route path="/requestAnimationFrame" component={RequestAnimationFrame} />
			<Route path="/requestIdleCallback" component={RequestIdleCallback} />
			<Route path="/useContext" component={UseContext} />
			<Route path="/suspense" component={SuspenseTest} />
			<Route path="/drag-play" component={DragPlay} />
			<Route path="/useImperativeHandle" component={UseImperativeHandle} />
			<Route path="/useComponents" component={UseComponents} />
			<Route path="/routes" component={Routes} />
			<Redirect to="/home" />
		</Switch>
	)
}

export default compose(withRouter)(RouteList)
